<template>
    <van-search  placeholder="请输入搜索关键词" right-icon="search" left-icon="" background="#f1ffe6"/>
    <div class="content">
        <div class="l">
            <div v-for="it in types" :key="it"
             :class="actType == it && 'act'"
             @click="typeClick(it)"
             >{{ it }}</div>
        </div>
        <div class="r" ref="myNode" @scroll="scrollEvt">
            <div class="item" v-for="it in list" :key="it.title" :id="it.title">
                <p>{{ it.title }}</p>
                <div class="types">
                    <div  v-for="oo in it.items" :key="oo.txt">
                        <img :src="baseURL + `${oo.path} `" alt="">
                        <p>{{ oo.txt }}</p>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Ref, ref } from "vue";
import { getTypesApi } from "../../apis/userApis";
const baseURL  = window.baseURL;
type Items = {
    txt:string;
    path:string;
}
interface ListInf {
    title:string;
    path?:string;
    items:Array<Items>
}
const list:Ref<Array<ListInf>> = ref([])
const types = ref([])
const actType: Ref<string> = ref('')

getTypesApi().then((d:any)  =>{
    if(d.code === 200){
        types.value = d.data.map((it:ListInf) => it.title)
        actType.value = types.value[0]
        list.value = d.data
    }
})

// 左侧分类点击事件
const myNode:Ref<HTMLDivElement> = ref() as Ref<HTMLDivElement>;    
function typeClick(it:string){
    let top:number = 0;
    for(let item of types.value){
        // 如果当前的标题与it一样，就跳出循环
        if(item === it){
            break
        }else{
            top += document.getElementById(item)?.clientHeight || 0;
        }
    }
    myNode.value.scrollTop = top;
    actType.value = it;
}

// 右侧滚动事件   
function scrollEvt(){
    let _list = JSON.parse(JSON.stringify(list.value))
    _list.map((it:any)=>{
        it.top = document.getElementById(it.title)?.getBoundingClientRect().top
        return it
    })
    // console.log(_list);
    
    _list.forEach((it:any)=>{
        if(it.top > 0 && it.top <= 80){
            actType.value=it.title
        }
    })
    
    
}
</script>

<style lang="less" scoped>
@import url('../../style/comon.less');
// .van-search{
//     border-bottom: 1px solid #bcbcbc;
// }
.content{
    height: calc(100% - 55px - 8vh);
    width: 100%;
    display: flex;
    background-color: #fff;
    .l{
        width: 26%;
        font-size: .65rem;
        // border-right: 1px solid #bcbcbc;
        overflow-x: hidden;
        background-color: @g1;
        div{
            line-height: 2.2rem;
            text-align: center;
            position: relative;
        }
    }
    .r{
        flex: 1;
        width: 0;
        overflow-x: hidden;
        background-color: #fff;
        .item{
            padding: .6rem .4rem;
            >p{
                font-size: .8rem;
                padding-left: .5rem;
            }
            .types{
                display: flex;
                flex-wrap: wrap;
                margin: 1.2rem 0;
                div{
                    width:  calc(100% / 3);
                    font-size: .65rem;
                    margin-bottom: .7rem;
                    text-align: center;
                    img{
                        width: 3.5rem;
                        height: 3.5rem;
                        margin-bottom: .5rem;
                    }
                    p{
                        margin: 0 10%;
                        width: 80%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        
                    }
                }
                
            }
        }
        
    }

}
.act{
    color: @b1;
    background-color: #fff;
    font-size: .75rem;
    &::before{
    content: '';
    position: absolute;
    width: 3px;
    height: 1.2rem;
    background-color: @b1;
    left: 2px;
    top: .5rem;
    border-radius: .5rem;
}
}
</style>